<template>
  <view>
    <form>
      

      <!-- <view class="cu-card margin radius">
        <view class="cu-form-group margin-top">
        <view class="title">工程编号</view>
        <view>{{ dataInfo.projectno }}</view>
      </view>
      <view class="cu-form-group">
        <view class="title xm-title">工程名称</view>
        <view class="sub-title">{{ dataInfo.projectname }}</view>
      </view>
      </view> -->
	  <u-sticky >
		  	<xmInfo
		  	  :projectno="dataInfo.projectno"
		  	  :projectname="dataInfo.projectname"
		  	></xmInfo>
	</u-sticky >
      <!--<view class="cu-form-group" >
         <view class="title"><text class="cuIcon-favorfill text-xs text-red"></text>收货日期</view>
        <picker
          mode="date"
          :value="dataInfo.arrDate ? dataInfo.arrDate :date"
          @change="DateChange"
        >
          <view class="picker">
            {{ dataInfo.arrDate ? dataInfo.arrDate : '请选择收货日期' }}
          </view>
        </picker> 
      </view>-->
	  <!-- <view class="cu-form-group" v-if="dataInfo.remarks">
	    <textarea
		  disabled
	      maxlength="-1"
	      :value="dataInfo.remarks"
	      placeholder=" "
	    ></textarea>
	  </view> -->
	  <view class="cu-form-group " style="margin-top: 10px">
	      <view class="title">供货单号</view>
	      <view class="input-align">{{dataInfo.asnno || ''}}</view>
	  </view>
	  <view class="cu-form-group ">
	      <view class="title">收货日期</view>
	      <view class="input-align">{{dataInfo.ddate || ''}}</view>
	  </view>
	  <view class="cu-form-group ">
	      <view class="title">供应商</view>
	      <view class="input-align">{{dataInfo.venname || ''}}</view>
	  </view>
	 <view class="cu-form-group " >
	      <view class="title">收货信息</view>
	      <view class="input-align">{{dataInfo.createByName || ''}} ({{dataInfo.createDate || ''}})</view>
	  </view>
	  <view class="cu-form-group ">
	      <view class="title">收货备注</view>
	      <view class="input-align" style="flex: 1;"> <textarea
		  style="100%"
          maxlength="-1"
		  disabled
          :value="dataInfo.remarks"
          placeholder=" "
        ></textarea></view>
	  </view>
	  
	  <view class="cu-form-group ">
	      <view class="title">现场图片</view>
	      <view class="input-align"><js-uploadfile
          v-model="dataInfo.dataMap"
          :biz-key="dataInfo.id"
          biz-type="pmAsnShrec_image"
		  :deletable="false"
		  :customBtn="true"
        ></js-uploadfile></view>
	  </view>
	  
	 <!-- 
      <view class="cu-form-group" style="min-height: 0"></view>
      <view class="cu-bar bg-white">
        <view class="action"></text>收货备注</view>
      </view>
      <view class="cu-form-group">
        <textarea
          maxlength="-1"
		  disabled
          :value="dataInfo.remarks"
          placeholder=" "
        ></textarea>
      </view> -->

      <!-- <view class="cu-form-group" style="min-height: 0"></view>
      <view class="cu-bar bg-white">
        <view class="action">现场图片</view>
      </view>
      <view class="cu-form-group">
        <js-uploadfile
          v-model="dataInfo.dataMap"
          :biz-key="dataInfo.id"
          biz-type="pmAsnShrec_image"
		  :deletable="false"
		  :customBtn="true"
        ></js-uploadfile>
      </view> -->
      <!-- <view class="cu-form-group" style="min-height: 0"></view> -->
     
	 <!-- -->
	 <view class="bg-white" style="margin-top: 10px;text-align: center;font-size: 18px;padding: 20rpx 0; font-weight: bold;">
	 			收货明细
	 </view>
	  <!-- <u-sticky offset-top="100" >
	  <view class="bg-white" style="margin-top: 10px;">
		  
		  <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
	   </view>
	   </u-sticky> -->
      <view class="cu-card"  v-if="childList && childList.length">
        <view
          class="cu-item shadow"
          v-for="(item, index) in childList"
          :key="index"
		  
        >
			<view class="cu-form-group" style="display: flex;justify-content: space-between">
			  <view
			    style="
			      display: inline-block;
			      padding: 5px;
			      background: #3e97b0;
			      color: #fff;
			      width: 40px;
			      text-align: center;
			      font-style: italic;
			      font-weight: bold;
			    "
			  >
			    {{ index + 1 }}
			  </view>
			  <view class="text-xl text-bold" style="flex: 1;margin: 0 5px;" >{{ item.mname || ''}}</view>
			  <!-- <view class="text-xl text-bold" style=" text-align: right;" @click="changeStatus(item)">
				  <u-icon v-if="item.status == 1" name="checkmark-circle" color="green" size="60"></u-icon>
				  <u-icon v-if="item.status == 2" name="close-circle" color="red" size="60"></u-icon>
			  </view> -->
			</view>
          <view class="cu-form-group">
            <view class="title">材料编码</view>
            <view >{{ item.mcode || ''}}</view>
          </view>
          <!-- <view class="cu-form-group padding">
            <view class="title">材料名称</view>
            <view>{{ item.basInv.mname || ''}}</view>
          </view> -->
          <view class="cu-form-group">
            <view class="title">规格型号</view>
            <view>{{ item.mstd || '' }}</view>
          </view>
		  <!-- <view class="cu-form-group">
		    <view class="title">单位</view>
		    <view>{{ item.basInv.unit || '' }}</view>
		  </view> -->
		  <view class="cu-form-group">
		    <view class="title">送货数</view>
		    <view>{{ item.iqty || '' }}（{{ item.unit || '' }}）</view>
		  </view>
		  <view class="cu-form-group">
		    <view class="title">实收数</view>
		    <view>{{ item.shQty || '' }}（{{ item.unit || '' }}）</view>
		  </view>
		  <view class="cu-form-group">
		    <view class="title">订单号</view>
		    <view>{{ item.cpoid }}</view>
		  </view>
		 <!-- <view class="cu-form-group">
		    <view class="title">备注</view>
		    <view>{{ item.remarks }}</view>
		  </view> -->
		
          <!-- <view class="cu-form-group">
            <view class="title"><text class="cuIcon-favorfill text-xs text-red"></text>备注</view>
            <view><input placeholder="请输入备注" name="input" v-model="item.remarks" :focus="true" class="input-align"/></view>
          </view> -->
          <!-- <view class="cu-form-group">
            <textarea
              maxlength="-1"
              @input="textareaAInput(item,$event)"
              placeholder="请输入备注"
              v-model="item.remarks"
              :focus="true"
            ></textarea>
          </view> -->
          <!-- <view class="cu-form-group" style="min-height: 0"></view>
          <view class="cu-bar bg-white">
            <view class="action"><text class="cuIcon-favorfill text-xs text-red"></text>材料图片</view>
          </view>
          <js-uploadfile
              v-model="item.dataMap"
              :biz-key="item.id"
              biz-type="pmMaterialcheck_image_child"
            ></js-uploadfile>

          <view class="cu-bar bg-white">
            <view class="action"></view>
            <view>
              <text class="cuIcon-deletefill padding text-sl text-red" @click="DelItem(item.pmid?item.pmid:item.id)" ></text>
            </view>
          </view> -->
        </view>
      </view>
	   <view v-if="!childList.length"  style="padding-top: 50px;">
	   	<u-empty ></u-empty>
	   </view>
      <view style="height: 80px"></view>
      <view class="btn-group cu-bar foot">
		 <!-- <button class="cu-btn bg-red shadow-blur"@click="submit('3')">
		      拒  收
		  </button>
		  <button class="cu-btn bg-blue shadow-blur"@click="submit('1')">
		      确定收货
		  </button> -->
        <view class="flex" >
            <js-bpm-button
          v-model="dataInfo.bpm"
          :biz-key="dataInfo.id"
          form-key="flow_asn_shRec"
          @complete="submit"
        ></js-bpm-button>
        </view>
        <!-- <view class="flex" v-else-if="!this.dataInfo.id">
            <js-bpm-button
          v-model="dataInfo.bpm"
          :biz-key="dataInfo.id"
          form-key="material_check"
          @complete="submit"
        ></js-bpm-button>
        </view> -->
      </view>
    </form>
    <!-- <add-detail
      :modalNameDetail="modalNameDetail"
      @modalNameDetailEmit="modalNameDetailEmit"
      @checkedListEmit="checkedListEmit"
      v-if="showAddDetail"
    ></add-detail> -->
	
	<u-modal v-model="show" title="确定收货" :mask-close-able="true" :show-cancel-button="true" @confirm="confirm">
		<view style="padding: 10px;">
			
			<view style="font-size: 24rpx;margin-bottom: 10px;">
				<text style="color: #aaa;margin-right: 20rpx;margin-bottom: 10rpx;">备注信息:</text>
				<textarea v-model="data.remarks" placeholder="请输入" type="text" placeholder-class="line" />
			</view>
			<view style="font-size: 24rpx;margin-bottom: 10px;">
				<text style="color: #aaa;margin-right: 20rpx;"><text class="cuIcon-favorfill text-xs text-red"></text>图片上传:</text>
				<js-uploadfile v-model="data.dataMap" :biz-key="data.id" biz-type="pmAsnShrec_image"></js-uploadfile>
			</view>
		</view>
	</u-modal>
	
  </view>
</template>
<script>
// import addDetail from "./addDetail.vue";
import xmInfo from "@/pages/zfgs/index/componetns/xmInfo.vue";
import {hasPermission} from '@/common/fire.js'
export default {
  components: {
    // addDetail,
    xmInfo
  },
  data() {
    return {
		data:{},
		show:false,
	  list: [
		{
			name: '全部'
		},
		{
			name: '已核对'
		}, 
		{
			name: '未核对',
		},
	   ],
	  current: 0,
      uploadOptions: {},
      switchA: false,
      date: new Date().toISOString().substring(0, 10),
      modalName: null,
      modalNameDetail: null,
      showAddDetail: false,
      dataInfo: {
        id: "",
        bpm: {},
        childList: [],   
      },
	  childList:[],
      isSubmitting: false,
      showButton: true,
      flag: hasPermission('btn:add:cailiaoshouhuo'),
      editflag: hasPermission('material:receive:pmMaterialneedArr:edit'),
    };
  },
  onLoad(e) {
    if (!!e.id) {
      this.showButton = true;
      this.dataInfo.id = e.id;
	  this.data.id = e.id;
      this.getPmMaterialneedArrForm(e.id);
    }
    if (!!e.xm) {
      this.showButton = true;
      this.dataInfo = JSON.parse(e.xm);
      //   巡检人
      this.dataInfo.state = 4;
    }
  },
  methods: {
	  change(index) {
	  		this.current = index;
			this.heidui(index)
	  },
	  heidui(status){
		  if(status == 0){
			  this.childList = this.dataInfo.pmAsnShrecsList
		  }else{
			  this.childList = this.dataInfo.pmAsnShrecsList.filter(item=>{
			  	return item.status == status
			  })
		  }
	  },
    switch1Change(e) {
      if (e.detail.value) {
        this.dataInfo.state = 0;
      } else {
        this.dataInfo.state = 1;
      }
    },
	confirm(){
		if (!this.data.dataMap || !this.data.dataMap.pmAsnShrec_image) {
		  this.$u.toast("请先上传图片！");
		  return;
		}
		try {
		  this.$u.api.zfgs
		    .pmAsnShrecSaveByAsn(this.data)
		    .then((res) => {
		      if (res.result == "true") {
		        this.$u.toast(res.message);
		        setTimeout(() => {
		            uni.navigateBack({
		              delta: 1,
		            });
		        }, 500);
		      }else{
		        this.$u.toast(res.message);
		      }
		    });
		} catch (error) {
		  this.$u.toast(error.message);
		} finally {
		  // this.isSubmitting = false;
		}
	},
    submit(status) {
        try {
		  this.dataInfo.status = 4;
          this.$u.api.zfgs
            .pmAsnShrecSave(this.dataInfo)
            .then((res) => {
              if (res.result == "true") {
                this.$u.toast(res.message);
                // const itemContent = {
                //   projectno: this.dataInfo.projectno,
                //   projectname: this.dataInfo.projectname,
                // };
                setTimeout(() => {
                    uni.navigateBack({
                      delta: 1,
                    });
                }, 500);
              }else{
                this.$u.toast(res.message);
              }
            });
        } catch (error) {
          this.$u.toast(error.message);
        } finally {
          // this.isSubmitting = false;
        }
    },

    DelItem(pmid) {
      uni.showModal({
        title: "",
        content: "确定要删除吗？",
        cancelText: "取消",
        confirmText: "确认",
        success: (res) => {
          if (res.confirm) {
            // 根据item.zhengGaiNo 查找要删除的项
            // let index = this.dataInfo.rectList.findIndex(
            //   (item) => item.id == items.id
            // );
            this.dataInfo.pmMaterialneedArrsList.map((item) => {
              console.log(item,'item===',pmid);
              if (item.pmid == pmid) {
                item.status = 1; //状态为1删除
                // 深度监听dataInfo.rectList
              }else if(item.id == pmid){
                item.status = 1;
              }

            });
            this.$forceUpdate();
            console.log(this.dataInfo.pmMaterialneedArrsList);
            this.$u.toast("删除成功");
          }
        },
      });
    },
    getPmMaterialneedArrForm(id) {
      this.$u.api.zfgs
        .pmAsnShrecForm({
          id: id,
        })
        .then((res) => {
          this.dataInfo = res.pmAsnShrec;
		  this.childList = [...this.dataInfo.pmAsnShrecsList]
		  this.childList = this.childList.map(item=>{
			  item.status = 2
			  return item
		  })
          // this.dataInfo.projectname = res.pmMaterialneedArr.name;
        });
    },
    SwitchA(e) {
      // this.switchA = e.detail.value
    },
	changeStatus(item){
		if(item.status == 1){
			item.status = 2
		}else{
			item.status = 1
		}
		this.$forceUpdate();
		this.heidui(this.current)
	},
    DateChange(e) {
      this.dataInfo.arrDate = e.detail.value;
      this.$forceUpdate();
    },
    textareaAInput(e) {
      console.log(e.detail.value,'textareaAInput');
      this.dataInfo.remarks = e.detail.value;
    },
    addDetail() {
      this.showAddDetail = true;

      this.modalNameDetail = "bottomModal";

      console.log(this.modalNameDetail);
    },
    modalNameDetailEmit(e) {
      this.modalNameDetail = e;
    },
    async checkedListEmit(e) {
      console.log(e, "checkedListEmit", this.dataInfo);
      if (!this.dataInfo.pmMaterialneedArrsList) {
        this.dataInfo.pmMaterialneedArrsList = [];
      }

      // 将 e 中的每个项目转换为所需格式
      const eArray = e.map(item => ({
        pmid: item.id,
        metercode: item.mcode,
        metername: item.mname,
        mstd: item.mstd,
        // 时间戳
        checkid: new Date().getTime(),
      }));

      // 使用临时对象辅助去重
      const uniqueItemsMap = {};

      // 先合并原数组与新数组中的项目到临时对象中，利用对象键的唯一性去重
      [...this.dataInfo.pmMaterialneedArrsList, ...eArray].forEach(item => {
        uniqueItemsMap[item.pmid] = item;
      });

      // 从临时对象中提取去重后的数组
      this.dataInfo.pmMaterialneedArrsList = Object.values(uniqueItemsMap);

      console.log(this.dataInfo.pmMaterialneedArrsList,'pmMaterialneedArrsList');
    },
  },
};
</script>
<style lang="scss" scoped>
.action {
  color: #303133;
}
.cu-form-group {
  flex-wrap: wrap;
}
.text-sl {
  font-size: 22px !important;
}
.cu-bar {
  min-height: 80px;
}
.cu-btn {
  font-size: 16px;
  height: 40px;
}
.foot {
  z-index: 997;
  background: #fff;
}
.green {
  color: green;
}
.input-align {
  text-align: right;
}
.sub-title{
  flex-grow: 1; /* 让右侧内容占据剩余空间 */
  max-width: 200px; /* 或其他合适的最大宽度，超过这个宽度时内容会换行 */
  word-break: break-word; /* 或 overflow-wrap: break-word; 允许单词在必要时断开以适应宽度 */
}
.xm-title{
  flex-basis: 100px; /* 或其他合适的固定宽度，用于左侧标题 */
  flex-shrink: 0; /* 防止标题在小屏幕下收缩 */
  overflow: hidden; /* 可选，防止内容溢出 */
}
.text-xsl {
  font-size: 60rpx !important;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
}
.text-xs {
  font-size: 18rpx !important;
}
</style>